import {
  Button,
  Form,
  FormItem,
  Image,
  Input,
  message,
  Modal,
  Radio,
  RadioGroup,
  Space
} from 'ant-design-vue'
import { id } from 'element-plus/es/locale'
import moment from 'moment'
import { defineComponent, nextTick, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { omit } from 'xe-utils'

import { recommondApi } from '@/apis'
import { LabelItem } from '@/apis/commonMenyTypes'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_FORMAT, TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import { useDialog } from '@/hooks'

export default defineComponent({
  name: 'RdQuestionMange',
  setup() {
    const { showConfirm } = useDialog()

    const tableRef = ref({} as ProTableRef)
    const showDialog = ref(false)
    const problemOptions = ref([] as any)

    const optionItemCur = ref({} as LabelItem)
    const tableConfig = ref({
      fixedHeight: true,
      options: {
        border: true,
        align: 'center',
        formConfig: {
          items: [
            {
              title: '问题类型',
              field: 'complaintType',
              itemRender: {
                name: TABLE_ITEM_RENDER.ASelect,
                props: {
                  placeholder: '全部',
                  allowClear: true
                },
                options: problemOptions
              }
            },
            {
              title: '提交时间',
              field: 'createTime',
              itemRender: {
                name: TABLE_RENDERER.FormItemDate,
                props: {
                  type: 'range',
                  placeholder: ['开始时间', '结束时间'],
                  valueFormat: 'x',
                  showTime: {
                    defaultValue: [
                      moment('00:00:00', 'HH:mm:ss'),
                      moment('23:59:59', 'HH:mm:ss')
                    ]
                  },
                  keys: ['startTime', 'endTime']
                }
              }
            },
            {
              itemRender: {
                name: TABLE_RENDERER.FormItemBtns
              }
            }
          ]
        },
        columns: [
          {
            title: '问题类型',
            field: 'complaintName'
          },
          {
            title: '问题描述',
            field: 'complaintDesc'
          },
          {
            title: '图片',
            slots: {
              default: 'image'
            }
          },
          {
            title: '提交时间',
            field: 'createTime',
            formatter: [TABLE_FORMAT.Date, 'yyyy-MM-dd HH:mm:ss'],
            minWidth: 150
          },
          {
            title: '联系电话',
            field: 'complaintPhone'
          },
          {
            title: '操作',
            fixed: 'right',
            slots: {
              default: 'operation'
            },
            width: 80
          }
        ],

        pagerConfig: {
          pageSize: 15
        },
        proxyConfig: {
          form: true,
          props: {
            result: 'dataList',
            total: 'page.totalCount'
          },
          ajax: {
            query: async ({ page, form }) => {
              form = omit(form, ['createTime'])
              const data = await recommondApi.getFeedBackList({
                pageParameter: {
                  pageSize: page.pageSize,
                  currentPage: page.currentPage
                },
                ...form
              })
              return data
            }
          }
        }
      }
    } as ProTableProps)

    onMounted(() => {
      getProblemList()
    })

    //获取优惠券和标签
    async function getProblemList() {
      try {
        const list = await recommondApi.getProblemList()
        if (list) {
          problemOptions.value = list.map(item => ({
            value: item.id,
            label: item.complaintName
          }))
        }
      } catch {}
    }

    //删除
    function handleDelete(item: LabelItem) {
      showConfirm({
        content: '确认删除该条反馈记录？',
        onOk: async () => {
          try {
            await recommondApi.deleteFeedBack(item.id)
            tableRef.value.refresh()
          } catch (error) {}
        }
      })
    }

    return {
      tableRef,
      tableConfig,
      showDialog,
      optionItemCur,
      handleDelete
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            image: ({ row }) => {
              return (
                <Space>
                  {row.complaintImgs?.split(',').map(item => (
                    <Image src={item} width={100}></Image>
                  ))}
                </Space>
              )
            },
            operation: ({ row }) => (
              <Space>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleDelete(row)}
                >
                  删除
                </Button>
              </Space>
            )
          }}
          {...this.tableConfig}
        />
      </div>
    )
  }
})
